<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>key的原理</title>
</head>

<body>
    <!-- 
        面试题：react 、vue 中的key有什么作用  ？  （key的内部原理）

            1.虚拟dom中key的作用：
                    key是虚拟 dom 对象的标识， 当数据发生变化时 vue会根据 新数据  生成 新的虚拟dom
                    随后 vue进行 新的虚拟dom 与 旧的虚拟dom 的差异比较 ，比较规则如下
                
            2.对比规则：
                    1.旧的虚拟dom中找到与新的虚拟dom中相同的key：
                        若虚拟dom中的内容没变，直接使用之前的真是dom
                        若虚拟dom中的内容变了，则生成新的真实dom，随后替换掉页面中之前的真实dom

                    2.旧的虚拟dom中未找到与新虚拟dom相同的key
                        创建新的真实dom，随后渲染到页面
            3.用index作为key可能引发的问题
                    1.若对数据进行：逆序添加，逆序删除等破坏顺序操作
                        会产生没有必要的真实dom更新==》界面效果没问题，但效率低
                    2.如果结构中有输入类的dom
                        会产生错误dom更新  ==》界面有问题
            4.开发中如何选择key
                    1.最好使用每条数据的唯一标识作为key  比如id、手机号、身份证、学号等唯一值
                    2.如果不存在对数据逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没问题的

     -->
    <div id="root">
        <!-- 遍历数组-人员列表 -->
        <button @click="add">点击添加老刘</button>
        <lu>
            <li v-for="(people,index) in peoples" :key="index">
                {{people.name}}-----{{people.age}}
                <input type="text">
            </li>
        </lu>

    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                peoples: [{
                    id: '001',
                    name: '张三',
                    age: '20'
                }, {
                    id: '002',
                    name: '李四',
                    age: '21'
                }, {
                    id: '003',
                    name: '王五',
                    age: '22'
                }, {
                    id: '004',
                    name: '赵六',
                    age: '23'
                }],

            },
            methods: {
                add() {
                    const p = {
                        id: '005',
                        name: '老刘',
                        age: '24'
                    }
                    this.peoples.unshift(p);
                }
            },
        })
    </script>
</body>

</html>